window.onload = () => {
    //游戏资讯 信息栏显示与隐藏
    let game_list = document.getElementById('game')
    let game_info = document.getElementById('game_info')
    let list = document.getElementById('list')
    list.onmouseover = () => {
        game_info.style.display = 'block'
    }
    list.onmouseout = () => {
        game_info.style.display = 'none'
    }
    //  切换导航栏
    let top_moreli = document.getElementsByClassName('top_moreli')
    let top_twoli = document.getElementsByClassName('top_twoli')[0].getElementsByTagName("li")
    for (let i = 0; i < top_twoli.length; i++) {
        top_twoli[i].onclick = () => {
            for (let j = 0; j < top_moreli.length; j++) {
                top_moreli[j].style.display = 'none'
                top_twoli[j].className = ''
            }
            top_twoli[i].className = 'active'
            top_moreli[i].style.display = 'block'
        }
    }
    //第一排第三个轮播图
    let next_btn = document.getElementById('next');
    let pre_btn = document.getElementById('pre');
    let lb_list = document.getElementById('lb_list');
    let container = document.getElementById('container');
    let dots = document.getElementById('dot').getElementsByTagName("span");
    let left = 0;
    let auto = null;
    let index = 0;  //图片下标
    let status = false;//动画是否正在执行
    //绑定下一张图片的按钮事件
    next_btn.onclick = () => {
        if (status) {
            return false;
        }
        left = parseInt(lb_list.style.left);//起点位置
        let new_left = left - 380;//终点
        if (new_left < -1520) {
            new_left = 0;
            //直接跳到第一张
            lb_list.style.left = 0
        }

        index = ++index > 4 ? 0 : index;//图片焦点下标改变
        // console.log(new_left);
        // lb_list.style.left = new_left + "px";
        changeDot()
        animation(new_left)
    }
    //绑定上一张图片的按钮事件
    pre_btn.onclick = () => {

        if (status) {
            return false
        }
        left = parseInt(lb_list.style.left);
        let new_left = left + 380;
        if (new_left > 0) {
            new_left = -1520;
            lb_list.style.left = -1520;

        }
        index = --index < 0 ? 4 : index;//图片焦点下标改变
        // console.log(index);
        lb_list.style.left = new_left + "px";
        changeDot()
        animation(new_left)
    }
    //绑定鼠标移动进轮播图时，自动轮播停止
    container.onmouseover = () => {
        clearInterval(auto)
    }
    // 绑定鼠标移动出轮播图时，自动轮播重新开启
    container.onmouseout = () => {
        atuoPlay();
    }
    //绑定焦点点击图标
    for (let i = 0; i < dots.length; i++) {
        dots[i].onclick = () => {
            if (index == i || status) {
                return false;
            }
            let new_index = i;
            new_left = i * -380;
            index = new_index;

            changeDot()
            lb_list.style.left = new_left + "px";

            //animation(new_left)

        }
    }
    //轮播动画
    function animation(new_left) {
        status = true;
        let left = parseInt(lb_list.style.left);
        let offset = new_left - left//总移动距离   
        let interval = 10;//单位时间
        let speed = offset / (1000 / interval);//速度
        function go() {
            left = parseInt(lb_list.style.left);//当前位置
            let next_left = left + speed;//下一单位时间所在位置
            lb_list.style.left = next_left + 'px'

            if (speed < 0 && next_left >= new_left || speed > 0 && next_left <= new_left) {
                setTimeout(() => {
                    go();
                }, interval)
            } else {
                lb_list.style.left = new_left + "px"

                status = false;  //动画结束
            }
        }
        go();
    }
    //自动播放轮播
    function atuoPlay() {
        auto = setInterval(() => {
            next_btn.onclick();//每三秒下一张 
        }, 2000);
    }
    //检查焦点
    function changeDot() {
        // console.log(dots.length)
        // for(let i=0;i<dots.lenght;i++){
        //         console.log(111)
        //     dots[i].className="";            
        // }
        for (let i = 0; i < dots.length; i++) {
            dots[i].className = "";
        }
        dots[index].className = 'on'
    }

    atuoPlay();




     //轮播动画
    function animation(new_left) {
        status = true;
        let left = parseInt(lb_list.style.left);
        let offset = new_left - left//总移动距离   
        let interval = 10;//单位时间
        let speed = offset / (1000 / interval);//速度
        function go() {
            left = parseInt(lb_list.style.left);//当前位置
            let next_left = left + speed;//下一单位时间所在位置
            lb_list.style.left = next_left + 'px'

            if (speed < 0 && next_left >= new_left || speed > 0 && next_left <= new_left) {
                setTimeout(() => {
                    go();
                }, interval)
            } else {
                lb_list.style.left = new_left + "px"

                status = false;  //动画结束
            }
        }
        go();
    }
    //自动播放轮播
    function atuoPlay() {
        auto = setInterval(() => {
            next_btn.onclick();//每三秒下一张 
        }, 2000);
    }
    //检查焦点
    function changeDot() {
        // console.log(dots.length)
        // for(let i=0;i<dots.lenght;i++){
        //         console.log(111)
        //     dots[i].className="";            
        // }
        for (let i = 0; i < dots.length; i++) {
            dots[i].className = "";
        }
        dots[index].className = 'on'
    }

    atuoPlay();


    //第二排大轮播图
let bignext_btn = document.getElementById('bignext');
let bigpre_btn = document.getElementById('bigpre');
let big_lb_list = document.getElementById('big_lb_list');
let bigdots = document.getElementById('bigdot').getElementsByTagName("span");
let big_left = 0;
let big_index = 0;  //图片下标
//绑定下一张图片的按钮事件
bignext_btn.onclick = () => {
  
    big_left = parseInt(big_lb_list.style.left);//起点位置
    let new_big_left = big_left - 788;//终点
    if (new_big_left < -1576) {

        new_big_left = 0;
        //直接跳到第一张
        big_lb_list.style.left = 0
    }

    big_index = ++big_index > 2 ? 0 : big_index;//图片焦点下标改变
   console.log(new_big_left);
    changeDot1()
    big_lb_list.style.left = new_big_left + "px";
    
    
}
//绑定上一张图片的按钮事件
bigpre_btn.onclick = () => {
    
    big_left = parseInt(big_lb_list.style.left);
    let new_big_left = big_left + 788;
    if (new_big_left > 0) {
        new_big_left = -1576;
        big_lb_list.style.left = -1576;

    }
    big_index = --big_index < 0 ? 2: big_index;//图片焦点下标改变
    // console.log(big_index);
    changeDot1()
    big_lb_list.style.left = new_big_left + "px";
    
}

//绑定焦点点击图标
for (let i = 0; i < bigdots.length; i++) {
    bigdots[i].onclick = () => {
        
        let new_big_index = i;
        new_big_left = i * -788;
        big_index = new_big_index;
        changeDot1()
        big_lb_list.style.left = new_big_left + "px";

    }
}
//检查焦点
function changeDot1() {
    for (let i = 0; i < bigdots.length; i++) {
        bigdots[i].className = "";
    }
    bigdots[big_index].className = 'on'
}

//  切换角色信息导航栏
let er = document.getElementsByClassName('er')
let yi_name = document.getElementsByClassName('yi_name')[0].getElementsByTagName("li")
for (let i = 0; i < yi_name.length; i++) {
    yi_name[i].onclick = () => {
        for (let j = 0; j < er.length; j++) {
            er[j].style.display = 'none'
            yi_name[j].className = ''
        }
        yi_name[i].className = 'isSecelt'
        er[i].style.display = 'block'
    }
}

}